<template>
	<view class="pb-safe-area">
		<view class="flex flex-center p-4 grid-gap-4">
			<input id="searchInput" v-model="keyword" type="text" class="bg-white rounded-4 p-4 flex-1" placeholder="搜索地点"
				confirm-type="search" @confirm="searchNearBy">
			<button class="btn-primary" @tap="confirm">确定</button>
		</view>
		<view class="flex flex-column grid-gap-4 p-4" id="output">
			<view class="flex flex-center bg-white p-4 rounded-4 grid-gap-2" @tap="selecedEvent()">
				<view class="flex-1 flex flex-column grid-gap-1">
					<text class="font-weight-500">不使用位置</text>
				</view>
				<uni-icons type="checkbox-filled" color="var(--xl-success)" v-if="seleced === undefined"></uni-icons>
				<uni-icons type="circle" color="var(--xl-grey)" v-else></uni-icons>
			</view>
			<view class="flex flex-center bg-white p-4 rounded-4 grid-gap-2" v-for="(item, index) in poiList"
				:key="index" @tap="selecedEvent(item, index)">
				<view class="flex-1 flex flex-column grid-gap-1">
					<text class="font-weight-500">{{ item.name }}</text>
					<text class="h9 text-placeholder">{{ item.address }}</text>
				</view>
				<uni-icons type="checkbox-filled" color="var(--xl-success)" v-if="seleced === index"></uni-icons>
				<uni-icons type="circle" color="var(--xl-grey)" v-else></uni-icons>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, nextTick, onBeforeUnmount } from "vue";
import { onLoad } from '@dcloudio/uni-app';
import { useMap } from "@/utils/map";
import { $EventName } from "@/utils/const/env";
let map: any, PlaceSearch: any;
const event = ref('');
const loading = ref(false);
const location = ref({
	latitude: 0,
	longitude: 0,
	range: 1000,
	address: ''
});
const keyword = ref('');
const seleced = ref<number>();
const poiList = ref([]);
const selecedEvent = (item?: any, index?: number) => {
	if(item === undefined){
		seleced.value = undefined;
		location.value.latitude = 0;
		location.value.longitude = 0;
		return;
	}
	seleced.value = index;
	location.value.latitude = item.location.lat;
	location.value.longitude = item.location.lng;
}
const confirm = () => {
	uni.$emit(event.value, location.value);
	uni.navigateBack();
}
const initAMap = () => {
	nextTick(() => {
		map.usePlugin('PlaceSearch', {
			pageSize: 50,
		}).then((instance: any) => {
			PlaceSearch = instance;
			PlaceSearch.setType('汽车服务|汽车销售|汽车维修|摩托车服务|餐饮服务|购物服务|生活服务|体育休闲服务|医疗保健服务|住宿服务|风景名胜|商务住宅|政府机构及社会团体|科教文化服务|交通设施服务|金融保险服务|公司企业|道路附属设施|地名地址信息|公共设施');
		}).catch((err: any) => { });
	})
}
const searchNearBy = () => {
	seleced.value = undefined;
	PlaceSearch.searchNearBy(keyword.value, [location.value.longitude, location.value.latitude], location.value.range, (status: string, result: any) => {
		if (status == 'complete' && result.info === 'OK') {
			poiList.value = result.poiList.pois;
		} else {
			poiList.value = [];
		}
	});
}
const useInitMap = () => {
	map = useMap(() => {
		initAMap();
	});
}
onLoad((options: any) => {
	event.value = options.event;
	location.value.latitude = Number(options.latitude);
	location.value.longitude = Number(options.longitude);
	location.value.range = Number(options.range);
	useInitMap();
	uni.$once($EventName.WEBCONFIG_READY, useInitMap)
});
onBeforeUnmount(() => {
	uni.$off($EventName.WEBCONFIG_READY, useInitMap);
});
</script>

<style lang="scss" scoped>
</style>
